<script>
/**
 * 导航栏
 */

import Nav from "@/components/Nav.vue";
import useNavInfoStore from "@/stores/nav";
import DrawerBox from "@/components/DrawerBox.vue";
import useRouterNameInfoStore from "@/stores/router-name";


export default {
  name: "ChannelMenu",
  components: {DrawerBox, Nav},

  setup(){
    const navInfoStore = useNavInfoStore();
    const routerNameInfoStore = useRouterNameInfoStore();

    return{
      navInfoStore,
      routerNameInfoStore
    }
  },

  data(){
    return{
      mSelectId: this.navInfoStore.selectId
    }
  },


  watch:{
    // 根据selectid调整路由跳转（保障selectId、navStore的selectId以及路由的一致性）
    mSelectId(newValue){
      let nav = this.navInfoStore;
      // 如果navStore中的selectId不等于newValue，则修改
      if(nav.selectId !== newValue)
      {
        nav.setSelect(newValue);
      } else return;

      // 如果newValue是默认id
      if(newValue === nav.defaultId){
        // 路由跳转到home页
        this.$router.push('/')
        return
      }
      // 此时路由已经不可能是跳转home
      this.$router.push({
        name: this.routerNameInfoStore.channelVideo,
        params: {
          englishName: nav.selectItem.englishName,
          subEnglishName: nav.subDefaultItem.englishName,
        }
      })
    },

  },

  mounted() {
    this.initValue(this.$route)
  },

  beforeRouteEnter(to) {
    console.log("进入路由: " + to.path);
  },

  // 路由更新时
  beforeRouteUpdate(to) {
    this.initValue(to);
  },

  methods:{
    // 根据路由更新组件value值
    initValue(route){
      let nav = this.navInfoStore;
      if(route.name !== this.routerNameInfoStore.home) {
        nav.setSelectByName(route.params.englishName);
        this.mSelectId = nav.selectId;
      }else{
        this.navInfoStore.setSelect(nav.defaultId);
        this.mSelectId = nav.defaultId;
      }
    }
  }

}
</script>

<template>
  <div style="display: flex; flex-direction: column;height: 100%">
    <div class="drawer-line"></div>
    <div class="channel-menu">
      <Nav :menu-value="navInfoStore.menus" v-model="mSelectId"></Nav>
      <DrawerBox :items="navInfoStore.menus" v-model="mSelectId"></DrawerBox>
    </div>
    <div style="overflow: auto">
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped>
/* 调整抽屉距顶部距离 */
:deep(.el-overlay){
  position: absolute;
  top: 50px;
  background: rgba(0, 0, 0, .3);
}

.channel-menu{
  display: flex;
  align-items: center;
  justify-items: center;
}
.channel-menu Nav{
  order: 1;
}

.channel-menu DrawerBox{
  float: right;
  order: 2;
}

</style>